// app global css in SCSS form
/* these are necessary styles for vue flow */
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/controls/dist/style.css';

/* this contains the default theme, these are optional styles */
@import '@vue-flow/core/dist/theme-default.css';

.unselectable {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer 10+ */
  user-select: none; /* 标准语法 */
}

.my-node-card {
  width: 300px;
}

.vue-flow__handle {
  height: 24px;
  width: 10px;
  background: #aaa;
  border-radius: 4px
}

.vue-flow__edges path {
  stroke-width: 3
}

.vue-flow__node {
  background-color: #f3f4f6
}

.node-input {
  background-color: var(--q-secondary) !important;
  color: #fff !important;
  border-radius: 4px
}

.vue-flow__node-input {
  background-color: var(--q-secondary) !important;
  display: flex;
  text-align: left;
  gap: 8px;
  padding: 0;
  width: fit-content;
  border-width: 2px;
  border-style: none;
  border-color: #bbb;
  border-radius: 4px
}

.vue-flow__node-input input {
  background-color: #169889 !important;
}

.vue-flow__node-input .q-card{
  background-color: #169889 !important;
}

.vue-flow__node-input.selected {
  border-color: #ec4899;
  box-shadow: 0 0 10px #ec4899;
}

.vue-flow__node-input .vue-flow__handle {
  background-color: #ec4899
}

.node-filter {
  background-color: var(--q-positive) !important;
  color: #fff !important;
  border-radius: 4px
}

.vue-flow__node-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  width: fit-content;
  border-radius: 8px;
  box-shadow: 0 0 10px #0003;
  border-width: 1px;
  border-style: none;
  border-color: #bbb;
}

.vue-flow__node-filter input {
  background-color: rgb(70, 155, 181) !important;
}

.vue-flow__node-filter.selected {
  border-color: #ec4899;
  box-shadow: 0 0 10px #ec4899;
}

.vue-flow__node-filter .vue-flow__handle {
  background-color: rgb(70, 155, 181) !important;
}


.node-gateway {
  background-color: var(--q-positive) !important;
  color: #fff !important;
  border-radius: 4px
}

.vue-flow__node-gateway {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  width: fit-content;
  border-radius: 8px;
  box-shadow: 0 0 10px #0003;
  border-width: 1px;
  border-style: none;
  border-color: #bbb;
}
.vue-flow__node-gateway .q-card{
  background-color: var(--q-positive) !important;
}

.vue-flow__node-gateway input {
  background-color: rgb(70, 155, 181) !important;
}

.vue-flow__node-gateway.selected {
  border-color: #ec4899;
  box-shadow: 0 0 10px #ec4899;
}

.vue-flow__node-gateway .vue-flow__handle {
  background-color: rgb(70, 155, 181) !important;
}

.node-output {
  background-color: var(--q-primary) !important;
  color: #fff !important;
  border-radius: 4px;
}

.vue-flow__node-output {
  display: flex;
  text-align: left;
  gap: 8px;
  padding: 0;
  width: fit-content;
  border-radius: 8px;
  box-shadow: 0 0 10px #0003;
  border-width: 1px;
  border-style: none;
  border-color: #bbb;
}

.vue-flow__node-output .q-card{
  background: var(--q-primary) !important;
}

.vue-flow__node-output input {
  background-color: rgba(0, 128, 255, 0.46) !important;
}

.vue-flow__node-output.selected {
  border-color: #ec4899;
  box-shadow: 0 0 10px #ec4899;
}

.vue-flow__node-output.selected {
  border-color: var(--q-primary);
}


.vue-flow__node-default.selected,
.vue-flow__node-default.selected:hover,
.vue-flow__node-input.selected,
.vue-flow__node-input.selected:hover,
.vue-flow__node-output.selected,
.vue-flow__node-output.selected:hover {
  border-color: #ec4899;
  box-shadow: 0 0 10px #ec4899;
}